<template>
  <div>
    <comcart>
      <div slot="body_name">
         <el-row :gutter="20">
          <el-col :span="10">
            <el-input
              placeholder="请输入用户名"
              size="small"
              class="input-with-select"
              v-model="fromObj.query"
            >
             <el-button
                slot="append"
                icon="el-icon-search"
                @click="query()"
              ></el-button>
              <el-buttonslot="append"icon="el-icon-search" @click="query()"></el-buttonslot>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary"  size="small" @click="gosave()" >添加</el-button>
          </el-col>
        </el-row>
        <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    
    <el-table-column
      prop="goods_id"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="goods_name"
      label="商品名称"
      width="350">
    </el-table-column>
    <el-table-column
      prop="goods_price"
      label="商品价格">
    </el-table-column>
    <el-table-column
      prop="goods_number"
      label="商品数量">
    </el-table-column>
     <el-table-column prop="add_time" label="创建时间">
       <template slot-scope="row">
         {{row.add_time | timeMF}}
       </template>
     </el-table-column>
        <el-table-column label="操作" width="200px">
         <template slot-scope="{ row }">
            <el-button type="primary" @click="update(row)">编辑</el-button>
            <el-button type="danger" @click="delte(row)">删除</el-button>
            </template>
        </el-table-column>
  </el-table>

 <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromObj.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="fromObj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"      
        >
        </el-pagination>
        <!-- 修改弹窗 -->
   <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
   <el-form>
            <el-form-item label="商品名称"  label-width="100px">
              <el-input v-model="secrchObj.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"  label-width="100px">
              <el-input v-model="secrchObj.goods_price"></el-input>
            </el-form-item>
              <el-form-item label="商品数量"  label-width="100px">
              <el-input v-model="secrchObj.goods_number"></el-input>
            </el-form-item>
           
          </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure()">确 定</el-button>
  </div>
</el-dialog>
      </div>
    </comcart>
  </div>
</template>

<script>
import comcart from "../../components/comcart"
    export default {
      components:{
        comcart
      },
        data(){
            return{
              dialogFormVisible:false,
              total:0,
                 tableData:[],
                 fromObj:{
                  query:"",
                  pagenum:1,
                  pagesize:5,
                },
                secrchObj:{
                  goods_id:"",//商品id
                  goods_name:"",//商品名
                  goods_price:"",//商品价格
                  goods_number:"",//商品数量
                  goods_weight:"",//商品重量
                  goods_state:"",//商品状态
                  add_time:"",//添加时间
                  upd_time:"",//更新时间
                  hot_mumber:"",//热销商品数量
                  is_promote:"",//是否是热销品
                  pics:"",//上传图片的临时路径  对象
                  attrs:"",//商品的参数   数组
                  cat_name:"",//分类名称
                },
                updated:{
                    goods_id:"",//商品id
                    cat_name:"",//分类名称
                }


            }
        },
        methods:{
          //数据渲染
         async query(){
            let rst=await this.$http.get("goods",this.fromObj)
            console.log(rst);
            this.tableData= rst.data.goods
            this.total=rst.data.total
          },
          //修改值回填
         async update(row){
            this.dialogFormVisible=true
            let rst=await this.$http.get(`goods/${row.goods_id}`)
            console.log(rst);
            let{data,meta}=rst
            console.log(data);
            let{goods_name,goods_price,goods_number,upd_time,goods_id}=data
            this.secrchObj.goods_name=goods_name
            this.secrchObj.goods_price=goods_price
            this.secrchObj.goods_number=goods_number
            this.secrchObj.upd_time=upd_time
            this.secrchObj.goods_id=goods_id
            
          },
          //确认修改 未完成！！
         async sure(){
            // this.dialogFormVisible = false
            console.log(this.secrchObj.goods_id);
            let rst=await this.$http.put(`goods/${this.secrchObj.goods_id}`,this.secrchObj)
            console.log(rst);
          },
          //删除
          delte(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
         let rst=await this.$http.delete(`goods/${row.goods_id}`);
            console.log(rst);
            this.query()
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          if (this.tableData.length == 1) {
            if (this.fromObj.pagenum >= 1) {
              this.fromObj.pagenum--;
            }
          }
          this.query();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
          },
         //添加
          gosave(){
           this.$router.replace("/shop/save")
          },
          mounted(){
           this.query()
          },

          
                //分页
         handleSizeChange(val) {
           this.fromObj.pagesize = val;
           this.query();
         },
         handleCurrentChange(val) {
           this.fromObj.pagenum = val;
           this.query();
         },
        },
        mounted(){
          this.query()
        },
    
    }
</script>

<style lang="less" scoped>

</style>